<template>
    <div class="container ercod">
        <div class="code">
            <p class="code-left"/>
            <p class="code-title">客服微信设置</p>
        </div>
        <p class="code-name">客服微信号</p>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item
                prop="wechat"
            >
                <el-input
                    v-model="ruleForm.wechat"
                    placeholder="必填"
                    class="wx-name"
                />
            </el-form-item>
            <el-form-item
                prop="qrcode"
                label="二维码图片"
            >
                <el-upload
                    :show-file-list="false"
                    :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                    accept="image/*"
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/">
                    <img
                        v-if="ruleForm.qrcode"
                        :src="ruleForm.qrcode"
                        class="avatar">
                    <i
                        class="el-icon-upload"
                        v-if="!ruleForm.qrcode"/>
                    <div
                        class="el-upload__text"
                        v-if="!ruleForm.qrcode">将文件拖到此处，或<em>点击上传</em></div>
                    <div
                        class="el-upload__tip"
                        slot="tip">只能上传jpg/png文件，且不超过500kb，建议尺寸280px*280px</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    class="code-btn"
                    @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data () {
        return {
            ruleForm: {
                wechat: '',
                qrcode: ''
            },
            rules: {
                wechat: [
                    { required: true, message: '请输入微信号', trigger: 'blur' }
                ],
                qrcode: [
                    { required: true, message: '二维码图片不能为空', trigger: 'change' }
                ]
            }
        };
    },
    created () {
        this.setHeader();
        this.getInfo();
    },
    methods: {
        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '社交'
            },
            {
                title: "二维码设置"
            }]
            );
        },

        /**
         * 获取客服信息
         */
        getInfo () {
            this.$post('/student/social_customer_service%5Cget', {
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        ...resp.data
                    };
                }
            });
        },
        /**
         * 上传图片
         */
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.ruleForm.qrcode = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },

        /**
         * 提交
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/social_customer_service%5Cset', {
                        ...this.ruleForm
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 15px;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        .code{
            display: flex;
            margin-left: 20px;
            align-items: center;
            margin-bottom: 20px;
            font-size: 16px;
            color: #606266;
            .code-left {
                width: 2px;
                height: 20px;
                background: #409eff;
                margin-right: 10px;
            }
        }
        .code-name {
            color: #606266;
            font-size: 14px;
            margin-left: 35px;
        }
        .wx-name {
            width: 400px;
        }
        .avatar{
            width: 100%;
            max-width: 360px;
            height: 100%;;
        }
        .code-btn {
            margin-left: 140px;
        }
    }
    .ercod .demo-ruleForm .el-form-item__content .upload-demo .el-upload .el-upload-dragger .avatar {
        width: auto !important;
        height: auto !important;
    }
</style>
<style>
    .ercod .el-form .el-form-item .el-form-item__content {
        margin-left: 35px !important;
        margin-top: 30px;
    }
    .ercod .el-form-item__label{
        text-indent: 40px !important;
        white-space: nowrap !important ;
    }
    .ercod .upload-demo .el-upload {
        margin-left: -60px !important;
        margin-top: 20px;
    }
    .el-upload-dragger {
        display: flex;
        justify-content: center;
        align-items: center;
    }


</style>